// 动画
.transition-property(@p:opacity){
	transition-property: @p;
}
.transition-duration(@d:.3s){
	transition-duration: @d;
}
.transition-timing-function(@tf: ease-in-out){
	transition-timing-function: @tf;
}
.transition-delay(@d: .3s){
	transition-delay: @d;
}
.transform(@t){
	transform: @t;
};



.an,
.ans{
	opacity: 0;
	transform: translateZ(0);
	transition: opacity .3s ease-in-out;

	transition-property: opacity,transform;
	.transition-delay;
}
.an-delay6{
	.transition-delay(.6s);
}
.an-delay9{
	.transition-delay(.9s);
}
.an-delay12{
	.transition-delay(1.2s);
}
.an-delay15{
	.transition-delay(1.5s);
}
.an-duration6{
	.transition-duration(.6s);
}
.an-duration9{
	.transition-duration(.9s);
}


.an-opacity{
	opacity: 1;
}
.an-right{
	.transform(translate(30%,0));
}
.an-right100{
	.transform(translate(100%,0));
}
.an-left{
	.transform(translate(-30%,0));
}
.an-top{
	.transform(translate(0,-30%));
}
.an-bottom{
	.transform(translate(0,30%));
}
.an-scale8{
	.transform(scale(.8));
}



.an-tf-cb{
	.transition-timing-function(cubic-bezier(.56,.16,.39,1.34));	
}


// animation-name	规定需要绑定到选择器的 keyframe 名称。。
// animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
// animation-timing-function	规定动画的速度曲线。
// animation-delay	规定在动画开始之前的延迟。
// animation-iteration-count	规定动画应该播放的次数。
// animation-direction	规定是否应该轮流反向播放动画。

.animation-duration(@t: 2s){
	animation-duration: @t;
}

.animation-delay(@t: .3s){
	animation-delay: @t;
}

.animation-iteration-count(@c: 1){
	animation-iteration-count: @c;
}




.ant,
.ans{
	opacity: 0;
	transform: translateZ(0);
}

.slide-active .ant{
	opacity: 1;
}

.slide-active .an-bounceInLeft{
	.bounceInLeft;
	.animation-duration;
};

.slide-active .an-bounceInRight{
	.bounceInRight;
	.animation-duration;
};

.slide-active .an-bounceInUp{
	.bounceInUp;
	.animation-duration;
};

.slide-active .an-bounceInDown{
	.bounceInDown;
	.animation-duration;
};


.an-in-active .an-bounceInLeft，
.an-in-active.an-bounceInLeft{
	.bounceInLeft;
	.animation-duration(1s);
};

.an-in-active.an-bounceInRight{
	.bounceInRight;
	.animation-duration(1s);
};
.an-in-active.an-bounceInDown{
	.bounceInDown;
	.animation-duration(1s);
};

.an-in-active.an-bounceInUp{
	.bounceInUp;
	.animation-duration(1s);
};

.an-in-active.an-bounceIn{
	.bounceIn;
	.animation-duration(1s);
};

.an-in-active.an-fadeIn{
	.fadeIn;
	.animation-duration(1s);
};



.slide-active .animation-duration1-5{
	.animation-duration(1.5s);
}

.slide-active .animation-duration2{
	.animation-duration(2s);
}


.slide-active .animation-duration2-5{
	.animation-duration(2.5s);
}


.slide-active .animation-duration3{
	.animation-duration(3s);
}


.slide-active .animation-delay0-3{
	.animation-delay(.3s)
}

.slide-active .animation-delay0-6{
	.animation-delay(.6s)
}

.slide-active .animation-delay0-9{
	.animation-delay(.9s)
}

.slide-active .animation-delay1-2{
	.animation-delay(1.2s)
}

.slide-active .animation-dela1{
	.animation-delay(1s)
}

.slide-active .animation-delay2{
	.animation-delay(2s)
}


.ans{
	transform: translate(0,50px);
}



.an-in-active,
.an-in-active .ans,
.slide-active .an{
	opacity: 1;

	transform: translate(0,0) rotate(0deg) scale(1);
}
